<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <!--                                                                  最小比例    最大比例           禁止用户放大缩小 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    #footer {
      width: 100%;
      height: 60px;
      background: skyblue;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-around;

    }

    #footer>div {
      width: 50%;
      text-align: center;
      line-height: 60px;
    }

    #footer .active {
      background: red;
    }

    #content>div {
      display: none;
    }

    .index_nav {
      width: 100%;
      display: flex;
      justify-content: space-around;
      height: 50px;
      border-bottom: 1px solid black;

    }

    .index_nav li {
      width: 33%;
      line-height: 50px;
      text-align: center;
    }

    .index_nav .active {
      background: firebrick;
    }

    .product_list {}

    .product_one {
      display: flex;
      height: 30px;
      line-height: 30px;
      margin: 10px 0;
      justify-content: space-around;
    }

    .product_one img {
      width: 30px;
      height: 30px;
    }

    .product_one button {
      width: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
  <div id="content">
    <!-- 首页部分 -->
    <div class="index_page" style="display: block;">
      <ul class="index_nav">
        <li class="active" se="s1">冰箱</li>
        <li se="s2">电脑</li>
        <li se="s3">手机</li>
      </ul>
      <div class="product_list">
        <!-- <div class="product_one">
          <img src="./img/bx1.jpg" alt="">
          <div>名称</div>
          <div>价格</div>
          <button>+</button>
        </div> -->
      </div>
    </div>
    <!-- 购物车部分 -->
    <div class="cart">
      <div class="product_list cart_list">
        <!-- <div class="product_one">
          <img src="./img/bx1.jpg" alt="">
          <div>名称</div>
          <div>价格</div>
          <button>-</button>
          <span>1</span>
          <button>+</button>
        </div> -->
      </div>
      <div id="totalEle"> 你的购物车总价是：</div>
    </div>
  </div>
  <div id="footer">
    <div class="active">首页</div>
    <div>购物车</div>
  </div>
  <script src="a.js"></script>
  <script>

    // 脚步tab切换--------------------------------------------------
    var obj = JSON.parse(localStorage.getItem("obj"))
    var list = obj.list; //商品列表数据
    var navs = document.querySelectorAll("#footer div")
    var conDiv = document.querySelectorAll("#content>div")
    for (var i = 0; i < navs.length; i++) {
      navs[i].index = i;
      navs[i].onclick = function () {
        for (var j = 0; j < conDiv.length; j++) {
          conDiv[j].style.display = "none"
        }
        conDiv[this.index].style.display = "block"
      }
    }
    // 取出首页导航------------------------------------------------------
    var lis = document.querySelectorAll(".index_nav li");
    for (var i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        // 所有的li移出active  
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = ""
        }
        this.className = "active" //当前li加上active 的class

        //  获取当前元素的自定义属性 筛选数据list
        var se = this.getAttribute("se"); //s1
        var mylist = [] //筛选好的数据
        list.forEach(function (ele, index) {
          // ele 数组的每一项  index  下标
          if (ele.se == se) {
            mylist.push(ele)
          }
        });
        console.log(mylist)
        loadList(mylist)

      }
    }
    // 初始加载冰箱的数据----------------------------
    var bingxiangArr = [];
    list.forEach(function (ele, index) {
      if (ele.se == "s1") {
        bingxiangArr.push(ele)
      }
    })
    loadList(bingxiangArr)//冰箱的数据
    // -------------------------------------------------------
    // 加载数据的函数
    function loadList(arr) {
      var product_list = document.querySelector(".product_list")
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `
              <div class="product_one">
              <img src="./img/${arr[i].img.substr(arr[i].img.indexOf("_") + 1)}" alt="">
              <div>${arr[i].name}</div>
              <div>${arr[i].price}</div>
              <button class="add" onclick=add(${JSON.stringify(arr[i])})>+</button>
            </div>
          `
      }
      product_list.innerHTML = str
    }
    // 加入购物车操作----------------------------------
    // 准备好 购物车的存储
    var cartlist = [];
    if (!localStorage.carts) {
      localStorage.carts = JSON.stringify([])
    } else {
      cartlist = JSON.parse(localStorage.carts)
    }
    function add(ele) {//添加商品到购物车
      // 判断当前商品是否加入过购物车
      if (checkCart(ele.name)) {
        // 更新商品数量
        UpdateNum(ele.name)
      } else {//商品不存在
        ele.num = 1;
        cartlist.push(ele)
      }
      localStorage.carts = JSON.stringify(cartlist)
      Total()//加入购物车后 从新计算总价
      loadCarts() //加入购物车完成  渲染数据
    }

    // 判断是否加入购物车函数--------------------------------------
    function checkCart(pname) {
      var flag = false;
      for (var i = 0; i < cartlist.length; i++) {
        if (cartlist[i].name == pname) {
          flag = true;
        }
      }
      return flag
    }
    // 更新商品数量的函数-----------------------------------
    function UpdateNum(pname) {
      for (var i = 0; i < cartlist.length; i++) {
        if (cartlist[i].name == pname) {
          cartlist[i].num++;
        }
      }
    }
    // 合计函数
    function Total() {
      var count = 0;
      for (var i = 0; i < cartlist.length; i++) {
        count += cartlist[i].price * cartlist[i].num
      }
      var totalEle = document.getElementById("totalEle");
      totalEle.innerHTML = "购物车总价：" + count;
    }
    Total()
    // 渲染购物车数据
    function loadCarts() {
      var cart_list = document.querySelector(".cart_list")
      var str = ""
      for (var i = 0; i < cartlist.length; i++) {
        str += `  <div class="product_one">
          <img src="./img/${cartlist[i].img.substr(cartlist[i].img.indexOf("_") + 1)}" alt="">
          <div>${cartlist[i].name}</div>
          <div>${cartlist[i].price}</div>
          <button onclick="min(${i})">-</button>
          <span>${cartlist[i].num}</span>
          <button onclick="plus(${i})">+</button>
        </div>`
      }
      cart_list.innerHTML = str;
    }
    loadCarts()
    // 购物车内部的+ 
    function plus(index) {
      cartlist[index].num++;
      localStorage.carts = JSON.stringify(cartlist)
      loadCarts()
      Total()
    }
    // 购物车内部的-
    function min(index) {
      console.log(cartlist[index].num)
      if (cartlist[index].num - 1 < 1) {
        console.log(88888888888)
        cartlist.splice(index, 1)
      } else {
        cartlist[index].num--;
      }
      localStorage.carts = JSON.stringify(cartlist)
      loadCarts()
      Total()
    }
  </script>
</body>

</html>